<template>
     <div>
       <BreadCrumb></BreadCrumb> 
       <el-card class="box-card maxh">
          <el-form ref="form" :model="form" label-width="80px">
               <el-form-item label="标题">
                   <el-input v-model="form.title" width="180px"></el-input>
               </el-form-item>
               <el-form-item label="类型">
                    <el-radio-group v-model="form.type">
                         <el-radio :label="1">文章</el-radio>
                         <el-radio :label="2">视频</el-radio>
                    </el-radio-group>
               </el-form-item>
               <el-form-item label="栏目">
               <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in categoriesList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
               </el-checkbox-group>
               </el-form-item>
               <el-form-item label="封面">
                    <!-- list-type 类型固定式照片墙 -->
                    <!-- action 是上传接口地址 -->
               <el-upload
                    :action="$axios.defaults.baseURL + '/upload'"
                    :headers="{
                         Authorization: 'Bearer ' + token
                    }"
                    :on-success="coverSuccess"
                    :on-remove="coverRemove"
                    :file-list="form.cover"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
               </el-upload>
               </el-form-item>
               <el-form-item label="内容">
                    <VueEditor 
                    v-model="form.content"
                    :useCustomImageHandler="true"
                    @image-added="imgUpload"
                    ></VueEditor>
               </el-form-item>
               <el-form-item>
                    <el-button type="primary" @click="postArtical">确&nbsp;定</el-button>
                    <el-button>取&nbsp;消</el-button>
               </el-form-item>
          </el-form>
       </el-card>
     </div>
</template>

<script>
import BreadCrumb from '../../components/BreadCrumb'
import { VueEditor } from 'vue2-editor'
export default {
     data() {
      return {
        token:localStorage.getItem('token'),   
        checkList:[],
        categoriesList:[],
        form: {
          id:null,
          title: '',
          type: 1,
          cover:[],
          categories: [],
          content:''
        }
      }
    },
     components:{
        BreadCrumb,
        VueEditor
     },
     watch:{
        checkList(){
             this.form.categories = this.checkList.map(item => {
                  return {
                       id:item
                  }
             })

        } 
     },
     methods: {
          getCategory(){
               this.$axios({
                   url:'/category'
               }).then(res => {
                   this.categoriesList = res.data.data.filter(item => {
                        return item.id !== 0 && item.id !== 999;
                   });
               })
          },
          // 处理富文本框自定义上传图片逻辑
          imgUpload(file, Editor, cursorLocation, resetUploader){
               // 这里是富文本框选择完图片会触发的函数
               // 带有四个参数 file, Editor, cursorLocation, resetUploader
               // file 选中的图片
               // Editor 是当前编辑器实例对象
               // cursorLocation 当前光标所在位置
               // resetUploader 这是上传完图片用来重新初始化上传功能的函数
               let formdata = new FormData();
               formdata.append('file',file);
               this.$axios({
                    url:'/upload',
                    method:'post',
                    data:formdata
               }).then(res => {
                    // Editor.insertEmbed() 这是编辑器自带函数, 可以往编辑框内放入内容
                    // 三个参数 位置 / 类型 / 内容
                    Editor.insertEmbed(cursorLocation, 'image', this.$axios.defaults.baseURL + res.data.data.url);
                    // 将图片插入到富文本框之后还要重置上传功能
                    resetUploader();
               })
          },
          coverSuccess(res, file){
               // 上传组件成功上传可以接受三个参数
               // res 请求结果
               // file 文件本身
               // fileList 文件列表
               // 1. 需要将 file 文件放入 this.form.cover 数组里面
               // 2. 我们的封面需要 id 这个 id 是从服务器传回来的
               file.id = res.data.id;
               console.log(file);
               this.form.cover.push(file);
          },
          coverRemove(file,fileList){
               this.form.cover = fileList;
          },
          postArtical(){
               this.$axios({
                    url:'/post',
                    method:'post',
                    data:this.form
               }).then(res => {
                    this.$router.push({name:'artical'});
                    this.$message.success(res.data.message);
               })
          },
          loadDetail(){
               if(!this.$route.query.id){
                   return; 
               }
               this.$axios({
                    url:'/post/'+this.$route.query.id
               }).then(res => {
                    // 获取复选框
                    this.checkList = res.data.data.categories.map(item => {
                         return item.id;
                    });
                    // 数据里面的 cover 地址需要添加基准路径
                    res.data.data.cover.forEach((item,index) => {
                         if(item.url.indexOf('http') == -1){
                              item.url = this.$axios.defaults.baseURL + item.url;
                         }
                    });
                    //变更富文本 div标签（处理错误数据）
                    res.data.data.content = res.data.data.content.replace(/div/g, 'p');
                    this.form = res.data.data;
               })
          }
    },
    mounted(){
        this.getCategory();
        this.loadDetail();
    }
}
</script>

<style lang="less" scoped>
.maxh{
     max-height:520px;
     overflow: auto; 
}
</style>